<%--
  Created by IntelliJ IDEA.
  User: 85435
  Date: 2025/7/19
  Time: 10:38
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        div {
            margin: auto;
            /*height: 80px;*/
            width: 800px;
            /*padding-top: 30px;*/
        }
    </style>

</head>
<body>
<%--  菜单按钮容器 --%>
<div>
    <%--  菜单  --%>
    <c:forEach items="${menuList}" var="menu">
        <button onclick="jump('${menu.location}')"> ${menu.name} </button>

    </c:forEach>
</div>


<%--    博文列表  --%>
<div id="content">

    <c:forEach items="${blogList}" var="blog">
        <div>
                <%--   博文标题     --%>
            <div> ${blog.title} | 作者：${blog.author} | 发布于：${blog.createTime} </div>
                <%--  内容  --%>
            <div> ${blog.content}</div>
            <hr>
        </div>
    </c:forEach>
</div>

<div id="pageHome">


</div>
</body>
</html>
<script>
    //菜单跳转页面
    function jump(location) {
        //window 是js核心组件
        window.location.href = location;
    }
    //使用js渲染分页按钮
    //当页面加载完成后，使用ajax发送请求获取分页数据  url=blog/page 返回的是分页数据  json格式
    window.onload = jumpPage();//分页信息、分页后的列表数据

    //跳转指定页面
    function jumpPage(pageNum) {
        //页码的初始值为1
        // js中得变量如果没有赋值 默认是undifined
        //除了undifined以外还有两种情况也属于空值
        if (null == pageNum || undefined == pageNum || '' == pageNum  || pageNum == 'null' || pageNum == 'undefined') {
            pageNum = 1
        }
        let xhr = new XMLHttpRequest();//创建ajax对象，异步请求，请求成功后，
        // 需要使用回调函数处理响应数据
        xhr.onreadystatechange = function () {
            //http响应状态码  200   readyState ==4  意思是收到后台响应数据
            if (xhr.status == 200 && xhr.readyState == 4) {
                //刷新页面
                let resp = xhr.responseText//返回的是json字符串
                let respData = JSON.parse(resp)//将返回的json数据转为对象
                //获取当前页码
                let pageNum = respData.data.pageNum
                //获取总页码数
                let pageTotal = respData.data.totalPage
                //获取当前页面的结果集
                let blogList = respData.data.data;
                showPage(pageNum,pageTotal);//渲染分页按钮

                //使用blogList  渲染页面数据（博文列表）
                let blogContentDiv = document.getElementById("content");
                blogContentDiv.innerHTML = "";//清除div中的博文列表

                let blogContent = "";
                for (let i = 0; i < blogList.length; i++){
                    let blogDiv = "<div>" +
                        "<div> "+blogList[i].title+" | 作者："+ blogList[i].author +" | 发布于："+ blogList[i].createTime+" </div>" +
                        "<div> "+blogList[i].content+"</div>" +
                        "<hr>" +
                        "</div>";
                    blogContent += blogDiv;
                }

                blogContentDiv.innerHTML = blogContent;
            }
        }
        ///user/blog/page?pageNum=null
        xhr.open("get", "/user/blog/page?pageNum=" + pageNum)//建立连接
        xhr.send();//发送请求

    }

    //显示分页按钮
    function showPage(currentPage,pageTotal) {
        let pagediv = document.getElementById("pageHome");
        let prePage = currentPage - 1;//如果当前页码就是1，
        let nextPage = currentPage + 1;//如果当前页码就是总页数，

        if (prePage < 1) {
            prePage = 1;
        }

        if (nextPage > pageTotal) {
            nextPage = pageTotal;
        }

        //根据总页数，渲染按钮
        let buttonStart = "<button onclick='jumpPage("+prePage+")'>上一页</button>";
        let buttonEnd = "<button onclick='jumpPage("+nextPage+")'>下一页</button>";

        for (let i = 1; i <= pageTotal; i++) {
            buttonStart += "<button onclick='jumpPage("+i+")'>" + i + "</button>";
        }
        buttonStart += buttonEnd;
        pagediv.innerHTML = buttonStart;
    }
</script>


